<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert Me</title>

    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link rel="stylesheet" type="text/css" href="vendors/styleMain.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
</head>

<body>

    <div class="container">
        <h1 class="headingMain animated bounceInUp">Convert Me <i class="fa fa-calculator"></i></h1>
        <div class="row">
            <div class="col-sm-3 mt-4 animated bounceInDown column">
                <div class="content">
                    <a href="weight.html">
                        <div class="btns">
                            <i class="fas fa-weight"></i>
                            <p>Weight</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInLeft">
                <div class="content">
                    <a href="length.html">
                        <div class="btns">
                            <i class="fas fa-ruler-horizontal"></i>
                            <p>Length</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInRight">
                <div class="content">
                    <a href="temprature.html">
                        <div class="btns">
                            <i class="fa fa-fw fa-thermometer-empty"></i>
                            <p>Temprature</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInDown">
                <div class="content">
                    <a href="volume.html">
                        <div class="btns">
                            <i class="fa fa-cube"></i>
                            <p>Volume</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInUp">
                <div class="content">
                    <a href="resistance.html">
                        <div class="btns">
                            <i class="fas fa-ticket-alt"></i>
                            <p>Resistance</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInRight">
                <div class="content">
                    <a href="current.html">
                        <div class="btns">
                            <i class="fa fa-battery-half"></i>
                            <p>Electric Current</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInLeft">
                <div class="content">
                    <a href="capasitance.html">
                        <div class="btns">
                            <i class="fas fa-industry"></i>
                            <p>Capacitance</p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-sm-3 mt-4 animated bounceInUp specialBottom">
                <div class="content">
                    <a href="speed.html">
                        <div class="btns">
                            <i class="fas fa-tachometer-alt"></i>
                            <p>Speed</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>